import React, { Component } from 'react'
import { Flex, Button, Grid } from 'react-vant'
import { Arrow } from '@react-vant/icons';

export default class ShouK extends Component {

    state = {
        username: '',
        usery: true,
        userhobby: [
            { id: 1, title: '包子', sed: false },
            { id: 2, title: '饺子', sed: true },
        ],
        homelist: [
            { tit: '音乐1', icon: <Arrow /> },
            { tit: '音乐2', icon: <Arrow /> },
            { tit: '音乐3', icon: <Arrow /> },
            { tit: '音乐4', icon: <Arrow /> },
            { tit: '音乐5', icon: <Arrow /> },
        ],
        homelistIndex: 0
    }

    //全选
    get all() {
        return this.state.userhobby.every(item => {
            return item.sed
        })
    }

    //tap切换
    changeSed = (id) => {
        let newlist = [...this.state.userhobby]
        newlist.forEach(item => {
            if (item.id == id)
                return item.sed = !item.sed
        })
        this.setState({ userhobby: newlist })
    }

    //反选
    changeProson = (c) => {
        let newlist = [...this.state.userhobby]
        newlist.forEach(item => {
            return item.sed = c
        })
        this.setState({ userhobby: newlist })
    }

    //数量
    get todo() {
        return this.state.userhobby.reduce((p, n) => {
            if (n.sed) {
                return p + 1
            }
            return p
        }, 0)
    }

    //切换高亮的方法
    changehomelist = (index) => {
        this.setState({ homelistIndex: index })
    }

    render() {

        return (
            <div>

                <div>
                    <label htmlFor="">用户名</label>
                    <input value={this.state.username} onChange={(e) => {
                        this.setState({ username: e.target.value })
                    }} />
                </div>

                <div>
                    <label htmlFor="">提交</label>
                    <input type='checkbox' checked={this.state.usery} onChange={(e) => {
                        this.setState({ usery: e.target.checked })
                    }} />
                </div>
                <button disabled={!this.state.usery} onClick={() => {
                    console.log(this.state.usery);
                }}>提交</button>

                <div>
                    {
                        this.state.userhobby.map(item => {
                            return <div key={item.id}>
                                <input type="checkbox" checked={item.sed} onChange={() => {
                                    this.changeSed(item.id)
                                }} />
                                <span>{item.title}</span>
                            </div>
                        })
                    }
                </div>
                <input type='checkbox' checked={this.all} onChange={(e) => {
                    this.changeProson(e.target.checked)
                }} /> 全选
                <div>总数:{this.todo}</div>

              {/*   <div>
                    <Flex gutter={16} wrap='wrap'>
                        {
                            this.state.homelist.map((item, index) => {
                                return <Flex.Item span={8} key={index}>
                                    <Button
                                        icon={item.icon}
                                        round size='small'
                                        type={this.state.homelistIndex == index ? 'primary' : 'default'}
                                        onClick={() => {
                                            this.changehomelist(index)
                                        }}>
                                        {item.tit}
                                    </Button>
                                </Flex.Item>
                            })
                        }
                    </Flex>
                </div> */}

                <div style={{marginTop:'20px'}}>
                    <Grid>
                        {
                            this.state.homelist.map((item,index) => {
                                return <Grid.Item key={index}>
                                    <Button 
                                    type={this.state.homelistIndex==index?'primary':'default'}
                                    round block size='small'
                                    onClick={()=>{
                                        this.changehomelist(index)
                                    }}
                                    >{item.tit}</Button>
                                </Grid.Item>
                            })
                        }
                    </Grid>
                </div>


            </div>
        )
    }
}
